<template>
  <div class="MinePage">
    <el-container>
      <!-- 头部 -->
      <el-header>{{ author.authorName }}的博客</el-header>
      <el-container>
        <!-- 左栏 -->
        <el-aside width="350px">
          <el-row
            type="flex"
            style="
              margin: 0 5px auto 5px;
              background-color: #d3dce6;
              padding: 10px;
            "
          >
            <el-col :span="6">
              <el-avatar
                :size="50"
                fit="cover"
                :src="author.authorAvatar"
                icon="el-icon-user-solid"
                shape="square"
              ></el-avatar>
            </el-col>
            <el-col :span="18">
              <el-row type="flex">
                <span
                  ><strong>{{ author.authorName }}</strong></span
                >
              </el-row>
              <el-row type="flex">
                <span> 粉丝：{{ author.authorfans }}</span>
              </el-row>
            </el-col>
          </el-row>
        </el-aside>
        <!-- 主栏 -->
        <el-main>
          <el-tabs
            v-model="activeName"
            type="border-card"
            @tab-click="handleClick()"
          >
            <el-tab-pane :label="'博客(' + bkDate.length + ')'" name="1">
              <el-table :data="filterData" style="width: 100%" max-height="500">
                <el-table-column fixed prop="blogTitleHeader" label="博客列表">
                  <template slot-scope="scope">
                    <el-row type="flex">
                      <el-col :span="24">
                        <router-link
                          :to="{
                            name: 'BlogDetail',
                            params: { id: changeDate[scope.$index].id },
                          }"
                          tag="a"
                        >
                          <span style="font-size: 1.4em"
                            ><strong>
                              {{
                                changeDate[scope.$index].blogTitleHeader
                              }}</strong
                            ></span
                          >
                        </router-link>
                      </el-col>
                    </el-row>

                    <el-row type="flex">
                      <el-col :span="24">
                        <span
                          class="content"
                          style="font-size: 0.8em; color: #999aaa"
                        >
                          {{ changeDate[scope.$index].blogTitleContent }}</span
                        >
                      </el-col>
                    </el-row>

                    <el-row type="flex">
                      <el-col :span="6">
                        <i class="el-icon-timer bk-info">
                          <span
                            class="msg"
                            style="font-size: 0.8em; color: #5f6471"
                          >
                            {{
                              changeDate[scope.$index].blogTitlePostTime
                            }}</span
                          >
                        </i>
                      </el-col>
                      <el-col :span="12">
                        <i class="el-icon-price-tag bk-info">
                          <span
                            class="msg"
                            style="font-size: 0.8em; color: #5f6471"
                          >
                            {{ changeDate[scope.$index].blogTitleLabel }}</span
                          >
                        </i>
                      </el-col>
                    </el-row>
                  </template>
                </el-table-column>

                <el-table-column align="center" width="150">
                  <template slot="header" slot-scope="scope">
                    <el-input
                      v-model="search"
                      size="mini"
                      placeholder="输入关键字搜索"
                    />
                  </template>
                </el-table-column>

                <el-table-column fixed="right" width="150">
                  <template slot="header">
                    <el-button
                      size="mini"
                      style="width: 100%"
                      type="primary"
                      @click="addBk()"
                      >写博客</el-button
                    >
                  </template>
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      @click="handleEdit(scope.$index, scope.row)"
                      >编辑</el-button
                    >
                    <el-popconfirm
                      confirm-button-text="好的"
                      cancel-button-text="不用了"
                      icon="el-icon-info"
                      icon-color="red"
                      title="确定删除此博客吗？"
                      @confirm="handleDelete(scope.$index, scope.row)"
                    >
                      <el-button size="mini" type="danger" slot="reference"
                        >删除</el-button
                      >
                    </el-popconfirm>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>

            <el-tab-pane :label="'关注(' + followDate.length + ')'" name="2">
              <el-table
                :data="followfilterData"
                style="width: 100%"
                max-height="500"
              >
                <el-table-column fixed prop="username" label="关注列表">
                  <template slot-scope="scope">
                    <el-row type="flex" align="middle">
                      <el-avatar
                        icon="el-icon-user-solid"
                        :src="followChangeDate[scope.$index].avatar"
                      ></el-avatar>

                      <span style="font-size: 1.2em; margin-left: 8px"
                        ><strong>
                          {{ followChangeDate[scope.$index].username }}
                        </strong>
                      </span>
                    </el-row>
                  </template>
                </el-table-column>

                <el-table-column fixed="right" width="150">
                  <template slot="header" slot-scope="scopef">
                    <el-input
                      v-model="followSearch"
                      size="mini"
                      placeholder="输入关键字搜索"
                    />
                  </template>
                  <template slot-scope="scopef">
                    <el-popconfirm
                      confirm-button-text="好的"
                      cancel-button-text="不用了"
                      icon="el-icon-info"
                      icon-color="red"
                      title="确定取消对ta的关注吗？"
                      @confirm="followDelete(scopef.$index, scopef.row)"
                    >
                      <el-button
                        size="mini"
                        :class="gz ? 'ygz' : 'wgz'"
                        slot="reference"
                        >{{ gztext }}</el-button
                      >
                    </el-popconfirm>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import {
  setLocalStorage,
  getLocalStorage,
  removeLocalStorage,
} from "@/util/local-storage.js";
import axios from "axios";

export default {
  name: "MinePage",
  inject: ["routerRefresh", "getloginInfo"],
  data() {
    return {
      author: {
        authorName: "hm",
        authorAvatar: "",
        authorfans: 0,
      },
      changeDate: [],
      bkDate: [
        {
          blogTitleHeader: "",
          blogTitleContent: "",
          blogTitlePostTime: "",
          blogTitleLabel: "",
        },
      ],
      followDate: [
        {
          username: "",
          avatar: "",
        },
      ],
      followChangeDate: [],
      activeName: "1",
      search: "",
      followSearch: "",
      gztext: "取消关注",
      gz: true,
    };
  },
  computed: {
    filterData: function () {
      if (this.search.match(/[\[\]\(\)\{\}\.\*\+\?\^\$\&\#\|]+/)) {
        this.$message({
          duration: 2000,
          message: "不可输入特殊字符哦",
          type: "warning",
          center: true,
        });
        return;
      }
      var input = this.search && this.search.toLowerCase();
      var items = this.bkDate;
      var items1;

      if (input) {
        items1 = items.filter((item) => {
          return String(item.blogTitleHeader).toLowerCase().match(input);
        });
      } else {
        items1 = items;
      }
      this.changeDate = items1;
      return items1;
    },
    followfilterData: function () {
      if (this.followSearch.match(/[\[\]\(\)\{\}\.\*\+\?\^\$\&\#\|]+/)) {
        this.$message({
          duration: 2000,
          message: "不可输入特殊字符哦",
          type: "warning",
          center: true,
        });
        return;
      }
      var input = this.followSearch && this.followSearch.toLowerCase();
      var items = this.followDate;
      var items1;

      if (input) {
        items1 = items.filter((item) => {
          return String(item.username).toLowerCase().match(input);
        });
      } else {
        items1 = items;
      }
      this.followChangeDate = items1;
      return items1;
    },
  },
  methods: {
    intobk(row) {
      console.log("intobk-row:", row);
    },
    followDelete(index, row) {
      console.log(index, row);
      let params = {
        followedUserId: row.id,
        fansUserId: localStorage.getItem("id"),
      };
      axios
        .post("http://localhost:8083/follow/setFollow", params)
        .then((res) => {
          if (res.data.errno != 0) {
            this.$message({
              duration: 2000,
              message: res.data.errmsg,
              type: "error",
              center: true,
            });
          } else {
            if (res.data.code == 1) {
              this.gz = true;
              this.gztext = "取消关注";
              this.$notify({
                title: "欢迎关注~",
                type: "success",
                showClose: false,
              });
            } else if (res.data.code == 2) {
              this.gz = false;
              this.gztext = "已取消关注";
              this.$notify({
                title: "已取消关注",
                type: "warning",
                showClose: false,
              });
            }
          }
        });
    },
    handleDelete(index, row) {
      console.log("row:", row);
      let params = {
        tId: row.id,
        blogId: row.blogBlogId,
      };
      axios
        .post("http://localhost:8083/titles/delTitleById", params)
        .then((res) => {
          if (res.data.errno != 0) {
            this.$message({
              duration: 2000,
              message: res.data.errmsg,
              type: "error",
              center: true,
            });
          } else {
            this.$message({
              duration: 2000,
              message: "删除博客成功",
              type: "success",
              center: true,
            });
            this.routerRefresh();
          }
        });
    },
    addBk() {
      this.$router.replace({
        name: "postTitle",
        params: { tagle: "MinePage" },
      });
    },
    handleEdit(index, row) {
      console.log(index, row.blogBlogId);
      this.$router.replace({
        name: "postTitle",
        params: { tagle: "MinePage", blogId: row.blogBlogId },
      });
    },
    handleClick() {},
    getUserInfo() {
      let params = {
        username: localStorage.getItem("username"),
      };
      axios
        .get("http://localhost:8083/titles/getTitlesByUid", { params })
        .then((res) => {
          if (res.data.errno != 0) {
            this.$message({
              duration: 2000,
              message: res.data.errmsg,
              type: "error",
              center: true,
            });
          }
          console.log("个人主页res:", res);
          this.bkDate = res.data.data.titleList;
          this.author.authorName = res.data.data.user.username;
          this.author.authorAvatar = res.data.data.user.avatar;
          this.author.authorfans = res.data.data.user.fans;
          console.log("bkDate:", this.bkDate);
        });
    },
    getFollowInfo() {
      let header = {
        headers: {
          "MyBlog-Token": localStorage.getItem("Authorization"),
        },
      };
      axios
        .get("http://localhost:8083/follow/getFollow", header)
        .then((res) => {
          if (res.data.errno != 0) {
            this.$message({
              duration: 2000,
              message: res.data.errmsg,
              type: "error",
              center: true,
            });
          }
          this.followDate = res.data.data.list;
          console.log("followDate:", this.followDate);
        });
    },
  },
  created() {
    this.getloginInfo().then((res) => {
      if (res) {
        this.getUserInfo();
        this.getFollowInfo();
      } else {
        this.$message({
          duration: 2000,
          message: "登录过期,请重新登录",
          type: "error",
          center: true,
        });
        this.$router.replace({ name: "Myblog" });
      }
    });
  },
};
</script>

<style scoped>
.ygz {
  background-color: aqua;
}
.wgz {
  background-color: #e9eef3;
}
.content {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.el-header,
.el-footer {
  line-height: 60px;
  color: #5f5b5b !important;
  user-select: none;
  cursor: pointer;
  font-weight: bold;
  font-size: 1.5em;
  padding: 0;
}
.el-aside {
  /* background-color: #d3dce6; */
  color: #333;
  text-align: center;
  margin-right: 10px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
}

.MinePage {
  padding: 1% 6% 0 6%;
}
</style>
